import React, { Component } from 'react'
/**
 * 子传父本质上 还是 父传子
 * 父传子 直接 传的就是 值
 * 子传父 其实就是 父给子传了一个 函数
 * 
 * 话术：
 * 父组件在调用子组件的地方，添加一个自定义的属性
 * 属性的值是一个 父组件定义的函数，函数的默认参数的值就是子组件到时候传递过来的值
 * 在子组件的某一个事件内部， 可以通过 执行 this.props.自定义的属性名(参数) 或者 props.自定义的属性名(参数)
 * 完成子组件给父组件的传值
 * */
class Child extends Component {
  state = { test: '测试' }
  render () {
    return (
      <div>
        child
        <button onClick = { () => {
          //vue this.$emit('myevent', this.state.test)
          this.props.fn(this.state.test)
        }} >发送数据给父组件</button>
      </div>
    )
  }
}
export default class App extends Component {
  getData = (data) => {
    console.log('接收到子组件的数组为：' + data)
  }
  render() {
    return (
      <div>
        <Child fn = { this.getData }/>
      </div>
    )
  }
}
